<template>
  <div class="page add-employee">
      <StoreChoice
        ref="StoreChoice"
        :current="store"
        :multipleChoice="false"
        :hasTotal="false"
        v-on:listenToStoreSelect="getSelectStoreValue"
      />
      <awesome-picker
        ref="pickerAffiliation"
        :textTitle="pickerAffiliation.textTitle"
        colorTitle="#38ADFF"
        colorConfirm="#38ADFF"
        :data="pickerAffiliation.data"
        :anchor="pickerAffiliation.anchor"
        @confirm="handlePickerAffiliation"
      ></awesome-picker>
      <awesome-picker
        ref="pickerEmployeeLevel"
        :textTitle="pickerEmployeeLevel.textTitle"
        colorTitle="#38ADFF"
        colorConfirm="#38ADFF"
        :data="pickerEmployeeLevel.data"
        :anchor="pickerEmployeeLevel.anchor"
        @confirm="handlePickerEmployeeLevel"
      ></awesome-picker>
      <awesome-picker
        ref="pickerOnjobStatus"
        :textTitle="pickerOnjobStatus.textTitle"
        colorTitle="#38ADFF"
        colorConfirm="#38ADFF"
        :data="pickerOnjobStatus.data"
        :anchor="pickerOnjobStatus.anchor"
        @confirm="handlePickerOnjobStatus"
      ></awesome-picker>
      <awesome-picker
        ref="pickerRegion"
        :textTitle="pickerRegion.textTitle"
        colorTitle="#38ADFF"
        colorConfirm="#38ADFF"
        :data="pickerRegion.data"
        :anchor="pickerRegion.anchor"
        @confirm="handleRegion"
      ></awesome-picker>
    <div class="scroll-view">
      <customHeader :middleTitle="title" @leftCallBack="handleBack"/>
      <div class="page-body" v-if="!readOnly">
        <ul class="mine-options">
          <li class="option-item">
              <span class="left">员工姓名</span>
              <div class="right">
                <inputClear
                  type="text"
                  warpClass="add-employee-input"
                  v-model="param.employeeName"
                  placeholder="请填写员工姓名"
                  :maxlength="10"
                  :max="10"
                />
              </div>
          </li>
          <li class="option-item">
              <span class="left">手机号码</span>
              <div class="right">
                <inputClear
                  type="tel"
                  v-if="!param.edit"
                  warpClass="add-employee-input"
                  v-model="param.employeeMobile"
                  placeholder="请输入手机号"
                  :maxlength="11"
                  :max="11"
                />
                <span class="value" v-if="param.edit">{{param.employeeMobile}}</span>
              </div>
          </li>
          <li class="option-item">
              <span class="left">员工编号</span>
              <div class="right">
                <inputClear
                  type="text"
                  warpClass="add-employee-input"
                  v-model="param.employeeCode"
                  placeholder="请输入员工编号"
                  :maxlength="20"
                  :max="20"
                />
              </div>
          </li>
          <li class="option-item" v-if="param.edit">
              <span class="left">在职状态</span>
              <div class="right" @click="showPicker('pickerOnjobStatus')">
                <span v-if="param.onjobStatus =='1'" class="value">在职</span>
                <span v-if="param.onjobStatus =='2'" class="value">离职</span>
                <span class="right-icon">
                  <i class="zhk-list_rarrow"></i>
                </span>
              </div>
          </li>
        </ul>
        <ul class="mine-options">
          <li class="option-item" v-if="role =='1'">
              <span class="left">编制归属</span>
              <div class="right" v-if="!param.edit" @click="showPicker('pickerAffiliation')">
                <span v-if="param.affiliation =='1'" class="value">总部</span>
                <span v-else-if="param.affiliation =='2'" class="value">单门店</span>
                <span v-else-if="param.affiliation =='3'" class="value">区域</span>
                <span class="right-icon">
                  <i class="zhk-list_rarrow"></i>
                </span>
              </div>
              <span class="right" v-if="param.edit">
                <span v-if="param.affiliation =='1'" class="value">总部</span>
                <span v-else-if="param.affiliation =='2'" class="value">单门店</span>
                <span v-else-if="param.affiliation =='3'" class="value">区域</span>
              </span>
          </li>
          <li class="option-item" v-if="(role =='1'||role =='7')&&param.affiliation =='2'">
              <span class="left">所属门店</span>
              <div class="right" v-if="!param.shopId" @click="chooseShopTo">
                <span class="value">请选择所属门店</span>
                <span class="right-icon">
                  <i class="zhk-list_rarrow"></i>
                </span>
              </div>
              <div class="right" v-if="param.shopId" @click="chooseShopTo">
                <span class="value">{{param.shopName}}</span>
                <span class="right-icon">
                  <i class="zhk-list_rarrow"></i>
                </span>
              </div>
          </li>
          <li class="option-item" v-if="role =='1'&&param.affiliation =='3'">
              <span class="left">所属区域</span>
             <div class="right" @click="showPicker('pickerRegion')" style="display:block">
                <span class="value">{{param.regionName?param.regionName:"请选择"}}</span>
                <span class="right-icon">
                  <i class="zhk-list_rarrow"></i>
                </span>
                <div class="sub-text">若添加区域，请到“我的-区域管理“进行操作</div>
              </div>

          </li>
          <li class="option-item">
              <span class="left">员工角色</span>
              <div class="right" @click="showPicker('pickerEmployeeLevel')">
                <span v-if="param.employeeLevel ==2" class="value">运营/市场</span>
                <span v-else-if="param.employeeLevel ==3" class="value">财务</span>
                <span v-else-if="param.employeeLevel ==4" class="value">店长</span>
                <span v-else-if="param.employeeLevel ==5" class="value">服务员</span>
                <span v-else-if="param.employeeLevel ==6" class="value">收银员</span>
                <span v-else-if="param.employeeLevel ==7" class="value">区域经理</span>
                <span class="right-icon">
                  <i class="zhk-list_rarrow"></i>
                </span>
              </div>
          </li>
        </ul>
        <div class="btn-wrap">
          <span
            class="btn"
            :class="{disabled:disabledSubmit}"
            @click="submit"
          >{{param.edit?'确定':'添加'}}</span>
        </div>
      </div>
      <div class="page-body" v-if="readOnly">
        <ul class="mine-options">
          <li class="option-item">
              <span class="left">员工姓名</span>
              <div class="right">
                <span class="value">{{param.employeeName}}</span>
              </div>
          </li>
          <li class="option-item">
              <span class="left">手机号码</span>
              <div class="right">
                <span class="value">{{param.employeeMobile}}</span>
              </div>
          </li>
          <li class="option-item">
              <span class="left">员工编号</span>
              <div class="right">
                <span class="value">{{param.employeeCode}}</span>
              </div>
          </li>
          <li class="option-item" v-if="param.edit">
              <span class="left">在职状态</span>
              <div class="right">
                <span v-if="param.onjobStatus =='1'" class="value">在职</span>
                <span v-if="param.onjobStatus =='2'" class="value">离职</span>
              </div>
          </li>
        </ul>
        <ul class="mine-options">
          <li class="option-item">
              <span class="left">编制归属</span>
              <span class="right">
                <span v-if="param.affiliation =='1'" class="value">总部</span>
                <span v-else-if="param.affiliation =='2'" class="value">单门店</span>
                <span v-else-if="param.affiliation =='3'" class="value">区域</span>
              </span>
          </li>
          <li class="option-item" v-if="param.affiliation =='2'">
              <span class="left">所属门店</span>
              <div class="right" v-if="param.shopId">
                <span class="value">{{param.shopName}}</span>
              </div>
          </li>
          <li class="option-item" v-if="param.affiliation =='3'">
              <span class="left">所属区域</span>
             <div class="right" >
                <span class="value">{{param.regionName}}</span>

              </div>
          </li>
          <li class="option-item">
              <span class="left">员工角色</span>
              <div class="right">
                <span v-if="param.employeeLevel ==2" class="value">运营/市场</span>
                <span v-else-if="param.employeeLevel ==3" class="value">财务</span>
                <span v-else-if="param.employeeLevel ==4" class="value">店长</span>
                <span v-else-if="param.employeeLevel ==5" class="value">服务员</span>
                <span v-else-if="param.employeeLevel ==6" class="value">收银员</span>
                <span v-else-if="param.employeeLevel ==7" class="value">区域经理</span>
              </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
import inputClear from "../../components/inputClear/inputClear";
import AwesomePicker from "vue-awesome-picker";
Vue.use(AwesomePicker);
import { Toast, MessageBox } from "mint-ui";

export default {
  name: "addEmployee",
  data() {
    return {
      userInfo: "",
      title: "添加员工",
      role: "1",
      store: [],
      readOnly:false,
      param: {
        shopId: "",
        employeeLevel: "",
        employeeName: "",
        employeeCode: "",
        affiliation: "1",
        employeeMobile: "",
        onjobStatus: "1"
      },
      canSubmit: false,
      pickerAffiliation: {
        anchor: [],
        textTitle: "请选择编制归属",
        data: [{ value: "总部" }, { value: "单门店" }, { value: "区域" }],
        selected: { value: "总部" }
      },
      pickerEmployeeLevel: {
        anchor: [],
        textTitle: "请选择员工角色",
        data: [],
        selected: {}
      },
      pickerRegion: {
        anchor: [],
        textTitle: "请选择区域",
        data: [],
        selected: {}
      },
      pickerOnjobStatus: {
        anchor: [],
        textTitle: "",
        data: [
          {
            value: "在职"
          },
          {
            value: "离职"
          }
        ],
        selected: {}
      }
    };
  },
  methods: {
    init() {
      this.param.employeeMobile = this.param.mobile || "";
      this.param.employeeName = this.param.name || "";
      this.param.employeeCode = this.param.code || "";
      if (this.param.roleName && this.param.roleName !== "") {
        switch (this.param.roleName) {
          case "运营/市场":
            this.param.employeeLevel = "2";
            break;
          case "财务":
            this.param.employeeLevel = "3";
            break;
          case "店长":
            this.param.employeeLevel = "4";
            break;
          case "服务员":
            this.param.employeeLevel = "5";
            break;
          case "收银员":
            this.param.employeeLevel = "6";
            break;
          case "区域经理":
            this.param.employeeLevel = "7";
            break;
          default:
            break;
        }
      }
      if (this.param.employeeLevel) {
        switch (this.param.employeeLevel) {
          case "2":
            this.pickerEmployeeLevel.selected = {
              value: "运营/市场"
            };
            break;
          case "3":
            this.pickerEmployeeLevel.selected = {
              value: "财务"
            };
            break;
          case "4":
            this.pickerEmployeeLevel.selected = {
              value: "店长"
            };
            break;
          case "5":
            this.pickerEmployeeLevel.selected = {
              value: "服务员"
            };
            break;
          case "6":
            this.pickerEmployeeLevel.selected = {
              value: "收银员"
            };
            break;
          case "7":
            this.pickerEmployeeLevel.selected = {
              value: "区域经理"
            };
            break;
          default:
            break;
        }
      }
      this.setEmployeeLevel();
      if (this.param.onjobStatus == "1") {
        this.pickerOnjobStatus.selected = { value: "在职" };
      } else if (this.param.onjobStatus == "2") {
        this.pickerOnjobStatus.selected = { value: "离职" };
      }
      this.store = [{ selectKey: this.param.shopId }];
      if(this.param.roleId=="7"){
        this.getRegionList();
      }
    },
    setEmployeeLevel() {
      if (this.role == "1") {
        if (this.param.affiliation == "1"&&!this.readOnly) {
          this.pickerEmployeeLevel.data = [
            {
              value: "运营/市场"
            },
            {
              value: "财务"
            }
          ];
          if (!this.param.employeeLevel) {
            this.pickerEmployeeLevel.selected = {
              value: "运营/市场"
            };
            this.param.employeeLevel = "2";
          }
        } else if (this.param.affiliation == "2"&&!this.readOnly) {
          this.pickerEmployeeLevel.data = [
            {
              value: "店长"
            },
            {
              value: "服务员"
            },
            {
              value: "收银员"
            }
          ];
          if (!this.param.employeeLevel) {
            this.pickerEmployeeLevel.selected = {
              value: "店长"
            };
            this.param.employeeLevel = "4";
          }
        }
        else if (this.param.affiliation == "3"&&!this.readOnly) {
          this.pickerEmployeeLevel.data = [
            {
              value: "区域经理"
            },
          ];
          if (!this.param.employeeLevel) {
            this.pickerEmployeeLevel.selected = {
              value: "区域经理"
            };
            this.param.employeeLevel = "7";
          }
        }
      } else if (this.role == "4"&&!this.readOnly) {
        this.param.affiliation = "2";
        this.pickerEmployeeLevel.data = [
          {
            value: "服务员"
          },
          {
            value: "收银员"
          }
        ];
        if (!this.param.employeeLevel) {
          this.pickerEmployeeLevel.selected = {
            value: "服务员"
          };
          this.param.employeeLevel = "5";
        }
      } else if (this.role == "7"&&!this.readOnly) {
       this.param.affiliation = "2";
        this.pickerEmployeeLevel.data = [
                    {
                      value: "店长"
                    },
                    {
                      value: "服务员"
                    },
                    {
                      value: "收银员"
                    }
                  ];
              }
    },
    showPicker(ref) {
      this.$refs[ref].show();
    },
    handlePickerAffiliation(v) {
      this.pickerAffiliation.anchor = v;
      this.pickerAffiliation.selected.value = v[0].value;
      if(this.pickerAffiliation.selected.value=="总部"){
        this.param.affiliation ="1";
      }else if(this.pickerAffiliation.selected.value=="单门店"){
        this.param.affiliation ="2";
      }else if(this.pickerAffiliation.selected.value=="区域"){
        this.param.affiliation ="3";
        this.getRegionList();
      }
      this.param.employeeLevel = "";
      if (this.role == "1") {
        (this.param.shopId = ""), (this.param.shopName = "");
        this.store = [{ selectKey: this.param.shopId }];
      }
      this.setEmployeeLevel();
    },
    handlePickerEmployeeLevel(v) {
      this.pickerEmployeeLevel.anchor = v;
      this.pickerEmployeeLevel.selected.value = v[0].value;
      switch (this.pickerEmployeeLevel.selected.value) {
        case "运营/市场":
          this.param.employeeLevel = "2";
          break;
        case "财务":
          this.param.employeeLevel = "3";
          break;
        case "店长":
          this.param.employeeLevel = "4";
          break;
        case "服务员":
          this.param.employeeLevel = "5";
          break;
        case "收银员":
          this.param.employeeLevel = "6";
          break;
        case "区域经理":
          this.param.employeeLevel = "7";
          break;
        default:
          break;
      }
    },
    handlePickerOnjobStatus(v) {
      this.pickerOnjobStatus.anchor = v;
      this.pickerOnjobStatus.selected.value = v[0].value;
      this.param.onjobStatus =
        this.pickerOnjobStatus.selected.value == "在职" ? "1" : "2";
    },
    handleRegion(v) {
      this.pickerRegion.anchor = v;
      this.pickerRegion.selected.value = this.pickerRegion.data[v[0].index].id;
      this.param.regionId = this.pickerRegion.data[v[0].index].id;
      this.pickerRegion.selected.text = v[0].value;
      this.param.regionName = v[0].value;
    },
    chooseShopTo() {
      //显示选择门店
      this.$refs.StoreChoice.popupShow();
    },
    handleBack() {
      if (this.$refs.StoreChoice && this.$refs.StoreChoice.popupVisible){
        this.$refs.StoreChoice.back();
      } else {
        this.$router.go(-1);
      }
    },
    getSelectStoreValue(value) {
      this.param.shopId = value[0].selectKey;
      this.param.shopName = value[0].selectName;
      this.store = [{ selectKey: this.param.shopId }];
    },
    submit() {
      if (!this.param.employeeName || !this.param.employeeMobile) {
        //Toast("请填写员工姓名");
        return;
      }
      if (!this.param.edit) {
        var phoneNumCheckRule=/^[1][0-9]{10}$/;
        if(this.param.employeeMobile&&!phoneNumCheckRule.test(this.param.employeeMobile)){
          Toast("请输入正确的手机号");
          return;
        }
      }
      if (this.param.employeeName.length > 10) {
        Toast("员工姓名不能超过10个字");
        return;
      }
      if (this.param.employeeCode.length > 20) {
        Toast("员工编号不能超过20个字");
        return;
      }
      var checkNameReg = /^[\u4e00-\u9fffa-zA-Z0-9]+$/;
      if (this.param.employeeName && !checkNameReg.test(this.param.employeeName)) {
        Toast("员工姓名不允许输入特殊字符");
        return;
      }
      if (this.param.onjobStatus == "") {
        Toast("请填写在职状态");
        return;
      }
      if (this.param.affiliation == undefined) {
        Toast("请选择所属编制");
        return;
      }
      if (this.param.affiliation == "2" && this.param.shopId == "") {
        Toast("请选择所属门店");
        return;
      }
      if (this.param.affiliation == "3" && !this.param.regionId) {
        Toast("请选择所属区域");
        return;
      }
      if (this.param.employeeLevel == "") {
        Toast("请选择员工角色");
        return;
      }
      if (this.param.edit) {
        this.ajax({
          type: "post",
          data: this.param,
          url: "/newapp/employee/update.do",
          controlLoading: true
        })
          .then(res => {
            if (res.success) {
              Toast("修改员工成功!");
              setTimeout(() => {
                this.$router.back();
              }, 3000);
            } else {
              Toast(res.msg);
            }
          })
          .catch(err => {});
      } else {
        debugger
        this.ajax({
          type: "post",
          data: this.param,
          url: "newapp/employee/add.do",
          controlLoading: true
        })
          .then(res => {
            if (res.success) {
              Toast(
                "员工创建成功!初始密码:手机后6位,为保障账号安全,请提醒员工及时修改"
              );
              setTimeout(() => {
                this.$router.back();
              }, 3000);
            } else {
              Toast(res.msg);
            }
          })
          .catch(err => {});
      }
    },
    getEmployeeInfo() {
      this.ajax({
        type: "get",
        url: "/newapp/employee/info.do?employeeId=" + this.param.employeeId,
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            _.assignWith(this.param, res.resultObject);
            this.init();
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {});
    },
    getRegionList(){
      if(this.pickerRegion.data.length>0){
        return;
      }
       this.ajax({
          type: "get",
          url: "/newapp/region/queryAllResion.do",
          controlLoading: false
        })
          .then(res => {
            if (res.success) {
               const data = res.resultObject;
                this.pickerRegion.data = this.pickerRegion.data.concat(
                CommonUtil.formatPickerData( data,"regionName","regionId")
              );
              if(this.param.regionId){
                this.pickerRegion.data.map((item,i)=>{
                  if(item.id==this.param.regionId){
                    this.pickerRegion.anchor=[{index:i}];
                  }
                });
              }
            } else {
              Toast(res.msg);
            }
          })
          .catch(err => {});
    }
  },
  computed: {
    disabledSubmit() {
      if (this.param.employeeName && this.param.employeeMobile) {
        return false;
      } else {
        return true;
      }
    }
  },
  mounted() {
    _.assignWith(this.param, this.$route.query);
    if (this.param.edit) {
      this.title = "编辑员工";
      CommonUtil.getUserInfo().then(data => {
        this.userInfo = data;
        if (data.role === "4") {
          this.param.shopId = data.yzShopId;
          this.param.shopName = data.shopName;
        }
        this.role = data.role;
        this.param.employeeId = this.param.accountId;
        this.getEmployeeInfo();
        if(data.role == this.param.roleId){
          this.readOnly = true;
          this.title = "查看";
        }else{
          this.readOnly = false;
        }
      });
    } else {
      CommonUtil.getUserInfo().then(data => {
        this.userInfo = data;
        if (data.role === "4") {
          this.param.shopId = data.yzShopId;
          this.param.shopName = data.shopName;
        }
        this.role = data.role;
        this.init();
      });
    }
  },
  components: {
    customHeader,
    StoreChoice,
    inputClear
  }
};
</script>
<style lang='scss' scoped>
@import "employeeManage";
</style>
<style lang="scss">
@import "../../style/public";
.add-employee-input {
  text-align: right !important;
  @include remCalc(font-size, 28, !important);
}
</style>
